<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .main {
            margin: 20px auto;
            width: 330px;
            height: 200px;
            border: 1px solid aqua;
            cursor: pointer;
        }
        #li1,#li2,#li3,#li4 {
            width: 80px;
            text-align: center;
            height: 25px;
            line-height: 25px;
            border: 1px solid aqua;
            float: left;
        }
        #div1,#div2,#div3,#div4 {
            padding-top: 20px;
            display: none;
            clear: both;
        }
        #div1 {
            display: block;
        }
    </style>
    <script>
        function fn(n,e) {
            for (var i = 1; i <= 4; i++) {
                var Div = document.getElementById('div'+i);
                Div.style.display = 'none';
//                查找所有li便签
                var b = document.getElementById("li"+i);
                b.style.border = "1px solid aqua";
            }
            var Div = document.getElementById('div'+n);
            Div.style.display = 'block';
           e.style.borderBottom = "white";
        }
    </script>
</head>
<body>
 <div class="main">
     <ul>
         <li id="li1" onmouseover="fn(1,this)">第一项</li>
         <li id="li2" onmouseover="fn(2,this)">第二项</li>
         <li id="li3" onmouseover="fn(3,this)">第三项</li>
         <li id="li4" onmouseover="fn(4,this)">第四项</li>
     </ul>
     <div id="div1">第一项</div>
     <div id="div2">第二项</div>
     <div id="div3">第三项</div>
     <div id="div4">第四项</div>
 </div>
</body>
</html>